// 调用接口获取banner图片
function getPictrue() {
    myAjaxPromise({
        url: 'http://api.yuguoxy.com/api/shop/banner',
        method: 'GET'
    }).then(res => {
        let list = res.resultInfo
        setPictrue(list.list)
    }).catch(err => {
        console.log(err);
    })
}

// 初始化轮播图
function swiper() {
    // 第一个轮播
    var mySwiper1 = new Swiper('#first-rotation', {
        autoplay: true, //可选选项，自动滑动
        loop: true,
        autoplay: {
            disableOnInteraction: false,
        },

        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }

    })

    // 第二个轮播
    var mySwiper2 = new Swiper('#second-rotation', {
        autoplay: true, //可选选项，自动滑动
        effect: 'coverflow',
        slidesPerView: 3,
        centeredSlides: true,
        loop: true,
        autoplay: {
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })
}

// 将获取到的图片添加到页面轮播
function setPictrue(list) {
    let imgStr = ''
    list.forEach((item) => {
        let str = `<div class="swiper-slide">
            <img src="${item.url}">
        </div>`
        imgStr += str
    });
    document.querySelector('#first-rotation>.swiper-wrapper').innerHTML = imgStr
    document.querySelector('#second-rotation>.swiper-wrapper').innerHTML = imgStr

    swiper()

}

let allStr = ``
let pageNo = 1
let totalnum = 0
let moreEle = document.querySelector('#more')
const productList = document.querySelector('#product-list')

//调用接口获取商品列表
function getProducts(pageNo) {
    myAjaxPromise({
        url: 'http://api.yuguoxy.com/api/shop/list',
        method: 'GET',
        data: {
            pageNo,
            pageSize: 10,
        }
    }).then(res => {
        if (res.resultCode == 1) {
            let products = res.resultInfo
            totalnum = res.resultInfo.totalNum
            console.log(totalnum);
            loadProducts(products.list)
        }
    }).catch(err => {
        console.log(err);
    })
}

// 将获取到的商品列表渲染到界面
function loadProducts(productsList) {
    productsList.forEach((item) => {
        let itemStr = `<div class="item" data-id=${item.id}>
                  <div class="picture"><img src="${item.picture}"></div>
                  <p>${item.product}</p>
                  <div class="price">
                      <p>￥${item.price}</p>
                      <span>月销 1000+</span>
                  </div>
              </div>`

        allStr += itemStr
    })
    productList.innerHTML = allStr
}

// 查看更多
function seeMore() {
    moreEle.addEventListener('click', function (e) {
        e = e || window.event
        e.preventDefault()
        pageNo = ++pageNo
        console.log(pageNo, totalnum);
        if (pageNo < totalnum) {
            getProducts(pageNo)
        } else {
            document.querySelector('#more>a').innerHTML = '没了~'
        }
    })
}

// 判断用户是否登录
function judgeLogin() {
    let name = document.querySelector('.name')
    let userMasege = localStorage.getItem('USER')
    if (userMasege) {
        name.innerHTML = userMasege
        document.querySelector('.out').innerHTML = '退出登录'
    } else {
        document.querySelector('.out').innerHTML = `<a href="./login.html">登录</a>&emsp;|&emsp;<a href="./logon.html">注册</a>`
    }
}

// 调用退出登录接口
function getOutInterface() {
    myAjaxPromise({
        url: 'http://api.yuguoxy.com/api/logout',
        method: 'GET',
    }).then(res => {
        if (res.resultCode == 1) {
            console.log(res.resultInfo);
        } else {
            console.log(res.resultInfo);
        }
    }).catch(err => {
        console.log(err);
    })
}
let outEle = document.querySelector('.out')

// 退出登录
function logOut() {
    outEle.addEventListener('click', function () {
        getOutInterface()
        localStorage.removeItem('USER')
        judgeLogin()
    })
}

let listEle = document.querySelector('#product-list')

// 点击商品跳转到详情页
function goDetailpage() {
    listEle.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        let id = target.getAttribute('data-id')
        location.href = './detailpage.html?id=' + id
    })
}

// 回到顶部
function goTop() {
    let go = document.querySelector('#goTop')
    go.addEventListener('click',function () {
        let time = setInterval(function () {
            document.documentElement.scrollTop = document.documentElement.scrollTop - 20
            if(document.documentElement.scrollTop <= 0){
              clearInterval(time)
            }            
        },10)  
    })
}
getPictrue()
getProducts(pageNo)
judgeLogin()
seeMore()
logOut()
goDetailpage()
goTop()